<script setup lang="ts">

import {onMounted, ref, watch} from 'vue'
import * as echarts from 'echarts'
import IconDropDown from "@/components/IconDropDown.vue";
import PageName from "@/components/PageName.vue";
import LineChart from "@/components/LineChart.vue";
import {useRouter} from 'vue-router'
import {
  getDataAlarmTechnologyList,
  getTechnologyDeviceParamList,
  getTechnologyDevices,
  getTechnologyDeviceLineChart,
  getTechnologyDeviceMonitors, getTechnologyDeviceLabels
} from '@/api/base.ts'
import VideoYs from '@/components/video-play/VideoYs.vue';
import VideoPlay from '@/components/video-play/VideoPlay.vue'

const router = useRouter()
const cid = router.currentRoute.value.query.cid as string

const deviceList = ref<any>([])
const deviceActive = ref<number>(0)
const deviceObj = ref<any>({})
const deviceParamData = ref<any>([])
const alarmInformation = ref<any>([])
const chartArry = ref<any>([])
const videos = ref<any>([])
const videoIndex = ref(0)
const lables = ref<any>([])
onMounted(() => {
  getTechnologyDevices(cid).then(res => {
    if (res.code === 200) {
      deviceList.value = res.data
      deviceActive.value = deviceList.value[0].id
    }
  })
})

watch(deviceActive, (val) => {
  if (!val) return;
  deviceObj.value = deviceList.value.find((item: any) => item.id === val)
  // 主要参数
  getTechnologyDeviceParamList(val, 1, 100).then(res => {
    if (res.code === 200) {
      deviceParamData.value = res.data
    }
  })
  // 告警信息
  getDataAlarmTechnologyList(val).then(res => {
    if (res.code === 200) {
      alarmInformation.value = res.data
    }
  })
  // 信息
  getTechnologyDeviceLineChart(val).then(res => {
    if (res.code === 200) {
      if (res.data.length) {
        chartArry.value = res.data?.map(item=>{
          return {
            ...item,
            key: (Math.random() * Math.pow(2, 54)).toString(36),
          }
        })
      }
    }
  })
  getTechnologyDeviceMonitors(val).then(res => {
    if (res.code === 200) {
      videos.value = res.data
    }
  })
  getTechnologyDeviceLabels(val).then(res => {
    if (res.code === 200) {
      lables.value = res.data?.filter(item=>item.coordinateX&&item.coordinateY)?.map(item=>{
        const left =`calc(${item.coordinateX*100}% - 31px)`
        const top =`calc(${item.coordinateY*100}% - 41px)`
        return {
          ...item,
          left,
          top,
        }
      })
    }
  })
})

const back = () => {
  router.go(-1)
}
</script>

<template>
  <div class="chem-all">
    <div class="page-name">
      <img @click="back" class="public-back_img cursor-pointer" src="@/assets/publick-back.png" alt="">
      <span @click="back" class="public-back_tit cursor-pointer">化工工艺</span>
    </div>
    <el-scrollbar class="chem-left" height="970">
      <div class="chem-flow" v-for="(item,index) in chartArry">
        <div class="public-flow public-list_tit">{{ item.name }}</div>
        <div class="chem-padL">
          <div class="flow-chart">
            <div class="chem-tit">单位<span>{{ item?.ydata?.[0]?.unit }}</span></div>
            <line-chart :chartData="item" :idx="index" :key="item.key" />
          </div>
        </div>
      </div>
    </el-scrollbar>
    <div class="chem-middle">
      <div class="home-left_cont">
        <div>
          <el-select v-model="deviceActive" placeholder="请选择" size="large" :suffix-icon="IconDropDown"
                     :teleported="false" style="width: 233px;" class="home-select public-select">
            <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </div>
        <div class="home-left-img">
          <img :src="deviceObj.flowChartImage" alt="">
          <div :style="'left:'+item.left+';top:'+item.top" class="home-left-img-label"
               v-for="(item,index) in lables" :key="index">
            <p class="paramName">{{ item.paramName }}</p>
            <p class="paramValue">{{ item.paramValue }}{{ item.paramUnit }}</p>
          </div>
        </div>
      </div>
      <div class="chem-table">
        <div class="elect-chart_top">
          <div class="public-param public-list_tit"/>
          <div class="">
          </div>
        </div>
        <div class="chem-table_bg">
          <el-table :data="deviceParamData" class="public-table" header-row-class-name="public-header_row"
                    header-cell-class-name="public-header_cell" row-class-name="public-body_row"
                    cell-class-name="public-body_cell" :cell-style="{ 'text-align': 'center' }"
                    :header-cell-style="{ 'text-align': 'center' }" height="200">
            <el-table-column prop="pointName" label="参数">
              <template #default="scope">
                <span :style="`color: ${scope.row.alarmColor}`">{{ scope.row.pointName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="当前状态">
              <template #default="scope">
                <span :style="`color: ${scope.row.alarmColor}`">{{
                    scope.row.status == 0 ? "正常" : scope.row.status == 1
                        ? "上限报警" : "下限报警"
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="realValue" label="数值">
              <template #default="scope">
                <span :style="`color: ${scope.row.alarmColor}`">{{ scope.row.realValue + '' + scope.row.unit }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="collectDate" label="采集时间">
              <template #default="scope">
                <span :style="`color: ${scope.row.alarmColor}`">{{ scope.row.collectDate }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="chem-right">
      <div class="chem-video">
        <div class="elect-chart_top">
          <div class="public-video public-list_tit"/>
          <div class="">
            <el-select v-model="videoIndex" placeholder="请选择" size="large" :suffix-icon="IconDropDown"
                       :teleported="false"
                       style="width: 122px;" class="elect-select public-select">
              <el-option v-for="(item,index) in videos" :key="index" :label="item.videoName" :value="index"/>
            </el-select>
          </div>
        </div>
        <div class="chem-video_cont">
          <div class="chem-video_img" v-if="videos?.[videoIndex]?.videoType===0">
            <VideoYs :height="271" :width="483" :url="videos?.[videoIndex]?.playEzopen"
                     :accessToken="videos[videoIndex]?.accessToken"/>
          </div>
          <div class="chem-video_img" v-if="videos?.[videoIndex]?.videoType===1||videos?.[videoIndex]?.videoType===2">
            <VideoPlay :height="271" :width="483" :url="videos?.[videoIndex]?.videoUrl"/>
          </div>
        </div>
      </div>
      <div class="elect-alarm">
        <div class="public-alarm public-list_tit"/>
        <el-scrollbar class="elect-alarm_list" height="590">
          <div class="elect-alarm_li" v-for="(item,index) in alarmInformation" :key="index">
            <div class="alarm-li_left">
              <div class="alarm-tit">
                <em class="alarm-num alarm-red" :style="'background-color:'+item.alarmColor">{{ item.alarmStatus }}</em>
                <span>{{ item.deviceName }}（{{ item.pointName }}）</span>
              </div>
              <div class="alarm-tit_desc">报警数值{{ item.alarmValue }}{{ item.unit }}</div>
            </div>
            <div class="alarm-li_date">
              {{ item.createDate }}
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.page-name {
  position: absolute;
  top: 60px;
  left: 16px;
  display: flex;
  align-items: center;

  .public-back_img {
    width: 32px;
    height: 32px;
  }

  .public-back_tit {
    margin-left: 6px;
    color: transparent;
    background-image: linear-gradient(#EEEEEE 0%, #1EA0FF 100%);
    -webkit-background-clip: text;
    font-family: YouSheBiaoTiHei;
    font-size: 24px;
    line-height: 31px;
    font-style: normal;
    font-weight: bold;
  }
}

.chem-all {
  display: flex;

  .chem-left {
    width: 468px;
  }

  .chem-right {
    width: 550px;
  }

  .chem-middle {
    width: 854px;
    height: 673px;
    margin: 0 16px;
    background: url("@/assets/home/home-bg.png") no-repeat;
    background-size: 100% 100%;
    padding: 12px 38px 29px 42px;
  }
}

.chem-padL {
  padding-left: 38px;
}

.chem-press {
  height: 323px;
  margin-bottom: 34px;

  .press-chart {
    border: 1px solid rgba(255, 255, 255, 0.12);
    height: 230px;
    margin-top: 23px;
  }
}

.chem-heat {
  height: 289px;

  .heat-chart {
    border: 1px solid rgba(255, 255, 255, 0.12);
    height: 230px;
    margin-top: 12px;
  }
}

.chem-flow {
  height: 294px;
  margin-bottom: 31px;

  .flow-chart {
    border: 1px solid rgba(255, 255, 255, 0.12);
    height: 230px;
    margin-top: 17px;
  }
}

.chem-tit {
  padding: 10px 12px 0;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  font-style: normal;

  span {
    font-size: 18px;
    color: #fff;
    margin-left: 8px;
  }
}

.chem-table {
  margin-top: 41px;
  width: 854px;
  position: relative;
  left: -40px;
}

.chem-video_cont {
  padding-left: 22px;
}

.chem-video_img {
  padding: 12px 16px 10px 29px;
  text-align: right;

  img {
    width: 401px;
    height: 255px;
  }
}

.chem-table_bg {
  padding: 31px 23px 21px 21px;
}

.chem-video_img,
.chem-table_bg {
  background: linear-gradient(to top, rgba(0, 169, 255, 0.2), rgba(0, 113, 188, 0.04));
}

.home-left_cont {
  width: 100%;
  height: 623px;
}

.home-left-img {
  margin-top: 9px;
  height: calc(100% - 45px);
  position: relative;

  img {
    width: 100%;
    height: 100%;
  }

  .home-left-img-label {
    position: absolute;
    width: 80px;
    background: #FFFFFF;
    border-radius: 6px;
    text-align: center;
    overflow: hidden;
    font-size: 15px;
    line-height: 22px;
    .paramName {
      background: #e83636;
      color: #FFFFFF;
    }
  }
}

.home-select {
  width: 300px;
}

:deep(.home-select .el-select__wrapper) {
  background: rgba(5, 35, 72, 0.41);
  border-radius: 5px;
  border: 1px solid #00AAFE;
  height: 50px;
  padding-left: 20px;
}

:deep(.elect-chart_top .el-select__wrapper) {
  background: rgba(5, 35, 72, 0.41);
  border-radius: 5px;
  border: 1px solid #00AAFE;
  height: 45px;
  padding-left: 20px;
}


.elect-chart_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.elect-alarm_list {
  padding: 0 21px 4px;
  margin-top: 8px;

  .elect-alarm_li {
    background: #0E233E;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
    padding: 14px 11px 18px 12px;

    &.elect-alarm_li:last-child {
      margin-bottom: 0;
    }

    .alarm-tit {
      display: flex;

      em {
        border-radius: 4px;
        padding: 1px 6px 3px 4px;
        font-style: normal;
        text-align: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #fff;
        font-style: normal;
      }

      span {
        margin-left: 5px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #0BE8F6;
        font-style: normal;
      }
    }

    .alarm-tit_desc {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #fff;
      font-style: normal;
      margin-top: 5px;
    }

    .alarm-li_date {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #fff;
      font-style: normal;
      text-align: right;
      width: 85px;
    }
  }
}

.alarm-red {
  background: #F7581F;
}

.alarm-yellow {
  background: #F7931F;
}

.public-press {
  background: url("@/assets/list-tit13.png") no-repeat;
}

.public-heat {
  background: url("@/assets/list-tit14.png") no-repeat;
}

.public-flow {
  background: url("@/assets/list-titleno.png") no-repeat;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 70px;
  color: #FFFFFF;
}

.public-param {
  background: url("@/assets/list-tit16.png") no-repeat;
}

.public-video {
  background: url("@/assets/list-tit17.png") no-repeat;
}

.public-alarm {
  background: url("@/assets/list-tit7.png") no-repeat;
}

:deep(.public-table) {
  background: rgba(255, 255, 255, 0);
  --el-table-bg-color: rgba(255, 255, 255, 0);
  --el-table-tr-bg-color: rgba(255, 255, 255, 0);
  --el-table-header-bg-color: rgba(255, 255, 255, 0);
}

:deep(.public-table .el-table__cell) {
  border-top: 1px dashed rgba(68, 241, 255, 0.15) !important;
  border-bottom: 1px dashed rgba(68, 241, 255, 0.15) !important;
}

:deep(.public-table .el-table__cell:first-child) {
  border-left: 1px dashed rgba(68, 241, 255, 0.15) !important;
}

:deep(.public-table .el-table__cell:last-child) {
  border-right: 1px dashed rgba(68, 241, 255, 0.15) !important;
}

:deep(.public-table .el-table__inner-wrapper:before) {
  height: 0;
}

:deep(.public-table .public-header_cell) {
  border: 1px solid #10F9FD !important;
  border-right: none !important;
  border-left: none !important;
}

:deep(.public-table .public-header_cell:first-child) {
  border-left: 1px solid #10F9FD !important;
}

:deep(.public-table .public-header_cell:last-child) {
  border-right: 1px solid #10F9FD !important;
}

:deep(.public-header_row) {
  background: rgba(13, 246, 232, 0.15) !important;
}

:deep(.public-header_cell) {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  font-style: normal;
}

/*:deep(.public-body_row) {
  background: rgba(255,255,255,0) !important;
}*/

:deep(.public-body_cell) {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  font-style: normal;
}

:deep(.public-table td.el-table__cell) {
  border: none;
}

:deep(.public-table .el-table__body) {
  -webkit-border-vertical-spacing: 4px;
}

:deep(.public-table .el-table__body tr>td) {
  background-color: rgba(13, 246, 232, 0.15) !important;
}
</style>
